<template>
  <div>
    <el-input
      placeholder="选择图标"
      @click="IconSelectShow = true"
      v-model="iconText"
    >
      <template #append>
        <template v-if="iconText&&iconText.indexOf('#') > -1">
          <el-button>
            <svg class="iconpark-icon" style="width: 14px; height: 14px">
              <use :href="iconText"></use>
            </svg>
          </el-button>
        </template>
        <template v-else>
          <el-button :icon="iconText || 'Search'" />
        </template>
      </template>
    </el-input>
    <el-dialog
      v-model="IconSelectShow"
      width="65%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-tabs v-model="tabSelect">
        <el-tab-pane
          :label="iconTypeItem.label"
          :name="index"
          v-for="(iconTypeItem, index) in iconList"
        >
          <div class="icon_item_box">
            <div
              class="icon_item"
              v-for="item in iconTypeItem.list"
              @click="selectIcon(item)"
            >
              <svg
                class="iconpark-icon"
                v-if="iconTypeItem.type === 'iconPark'"
              >
                <use :href="item"></use>
              </svg>
              <Component
                style="width: 25px; height: 25px"
                :is="item"
                v-else
              ></Component>
              <div class="icon_name">{{ item }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      IconSelectShow: false,
      iconText: this.modelValue,
      tabSelect: 0,
    };
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    iconList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    selectIcon(item) {
      this.iconText = item;
      this.$emit("update:modelValue", item);
      this.IconSelectShow = false;
    },
  },
};
</script>
<style scoped lang="scss">
.iconpark-icon {
  width: 25px;
  height: 25px;
}

.icon_name {
  font-size: 10px;
  height: 20px;
  padding-top: 10px;
  color: #d1cece;
}

.icon_item_box {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;

  .icon_item {
    width: 6%;
    min-width: 50px;
    height: 50px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.2);
      font-weight: bold;
    }

    &:hover .icon_name {
      color: black;
    }
  }
}
</style>
